<template>
    <div class="container">
      <!-- 搜索和新增区域 -->
      <div class="header">
        <el-input
          v-model="searchKey"
          placeholder="请输入姓名搜索"
          style="width: 200px; margin-right: 20px"
          @input="handleSearch"
        />
        <el-button type="primary" @click="showDialog('add')">新增</el-button>
      </div>
  
      <!-- 表格区域 -->
      <el-table :data="pagedData" style="width: 100%">
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="small" @click="showDialog('edit', row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="filteredData.length"
        :page-size="pageSize"
        @current-change="handlePageChange"
      />
  
      <!-- 新增/编辑弹窗 -->
      <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
        <el-form :model="formData" label-width="60px">
          <el-form-item label="姓名" required>
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="年龄" required>
            <el-input v-model.number="formData.age" type="number" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        // 原始数据
        tableData: [
          { id: 1, name: '张三', age: 25 },
          { id: 2, name: '李四', age: 28 }
        ],
        // 分页相关
        currentPage: 1,
        pageSize: 5,
        // 搜索相关
        searchKey: '',
        // 弹窗相关
        dialogVisible: false,
        dialogType: 'add', // add/edit
        formData: {
          name: '',
          age: null
        }
      }
    },
    computed: {
      // 过滤后的数据
      filteredData() {
        return this.tableData.filter(item => 
          item.name.includes(this.searchKey)
        )
      },
      // 分页后的数据
      pagedData() {
        const start = (this.currentPage - 1) * this.pageSize
        const end = start + this.pageSize
        return this.filteredData.slice(start, end)
      },
      // 弹窗标题
      dialogTitle() {
        return this.dialogType === 'add' ? '新增人员' : '编辑信息'
      }
    },
    methods: {
      // 显示弹窗
      showDialog(type, row) {
        this.dialogType = type
        if (type === 'edit') {
          this.formData = { ...row }
        } else {
          this.formData = { name: '', age: null }
        }
        this.dialogVisible = true
      },
      // 提交表单
      handleSubmit() {
        if (!this.formData.name || !this.formData.age) {
          this.$message.warning('请填写完整信息')
          return
        }
        
        if (this.dialogType === 'add') {
          // 新增
          this.tableData.push({
            ...this.formData,
            id: Date.now()
          })
        } else {
          // 编辑
          const index = this.tableData.findIndex(item => item.id === this.formData.id)
          this.tableData.splice(index, 1, this.formData)
        }
        this.dialogVisible = false
      },
      // 分页变化
      handlePageChange(page) {
        this.currentPage = page
      },
      // 搜索处理
      handleSearch() {
        this.currentPage = 1
      }
    }
  }
  </script>
  
  <style scoped>
  .container {
    padding: 20px;
  }
  .header {
    margin-bottom: 20px;
  }
  </style>